*{
    margin:0;
    padding:0;
}
html{
    font-size:62.5%;
    background-color: brown;
}
.box{
    width:12rem;
    height:12rem;
    border-radius: 10%;
    background-color: beige;
    border: .5rem solid #ccc;
    padding: 1rem;
    display: flex;
    margin: 1rem auto;
}

.dot{
    width:2.4rem;
    height:2.4rem;
    border-radius: 50%;
    background-color: black;
}
.box1{
    justify-content: center;
    align-items: center;
}

.box2{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.box3{
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.dot3-1{
    align-self: flex-start;
}

.dot3-3{
    align-self: flex-end;
}

.box4{
    flex-direction: column;
    justify-content: space-between;
}
.column{
    display: flex;
    justify-content: space-between;
}
.box5{
    flex-direction: column;
    justify-content: space-between;
}
.column-5{
    display: flex;
    justify-content: center;
}

.box6{
    flex-direction: column;
    justify-content: space-around;
}